<!--
 * @Author: your name
 * @Date: 2021-06-29 19:41:14
 * @LastEditTime: 2021-07-01 19:22:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \STARBUCKS\上海烘培工坊.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星巴克臻选 上海烘焙工坊</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/index.css">     
    <style>
        
        .hb img{
            width: 100%;
            height: 500px;
            position:absolute; 
            left:505px; 
            right: 0;
            top:0px; 
            bottom: 0;  
        } 
        #banner {
            width: 600px;
            height: 50px;
            margin: 50px auto;
            position: relative; /*相对定位,相对于.btn按钮*/
            text-align: left;
            top: 400px;
        }
        .pic image {
            width: 100%;
            height: 100%;
            display: block; /*默认有图片不显示*/
            position: absolute; /*绝对定位.对应的是.pic这个div*/
            top: 100px;
            left: 0px;
        }
        .pic a {
            display: none;
        }
        .pic { /*专门显现图片区*/
            position: relative; /*相对定位.对应.pic img*/
            border: 1px solid #926028;
            width: 1050px;
            height: 800px;
            left: 50px;
            top: 10px;
        }
        .btn1 {
            width: 800px;
            height: 18px;
            position: absolute; /*绝对定位相对于banner div*/
            top: 20px;
            bottom: 0px;
            left: 500px; 
            right: 0px;
        }
        .btn1 ul li {
            background-color: #000000; /*黑色*/
            color: #ffffff;
            list-style-type: none;
            width: 18px;
            height: 18px;
            float: left;
            border-radius: 9px; /*变成圆的*/
            text-align: center;
            line-height: 18px;
            cursor: pointer; /*鼠标移动变手指状态*/
            margin-left: 5px;
        }
        .btn1 ul li.one {
             background-color: #ff9966;
        }
        .bean{
            position: absolute;
            top: 1280px;
            right: 0;
            left: 550px;

        }
        .bean h1{
            color: #555;
        }
        .bean h3{
           color: #a7673f;
        }
        .p1{
            position: absolute; 
            top: 1400px;
            right: 0;
            left: 505px;
        }
        .p2{
            position: absolute; 
            top: 1900px;
            right: 0;
            left: 505px;
        }
        .p3{
            position: absolute; 
            top: 2400px;
            right: 0;
            left: 505px;
        }
        .p4{
            position: absolute; 
            top: 2900px;
            right: 0;
            left: 505px;
        }
        .p5{
            position: absolute; 
            top: 3400px;
            right: 0;
            left: 505px;
        }

</style>
    </style>
</head>
<body>
    <div class="left">
        <div class="container-fluid">
            <div class="row justify-content-end">
                <div class="col-lg-4 position-fixed border-right leftCon">
                    <!-- 导航栏 -->
                    <header class="navbar d-none d-sm-flex px-0 px-lg-3 py-3 py-lg-4">
                        <a href="#" class="navbar-brand"><img src="images/logo.svg" alt="" width="36"></a>
                        <ul class="nav mr-auto">
                            <li class="nav-item">
                                <a href="#" class="nav-link text-dark font-weight-bold">门店</a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link text-dark font-weight-bold">我的账户</a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link text-dark font-weight-bold">菜单</a>
                            </li>
                        </ul>
                        <span class="iconfont icon-menu" id="showBtn"></span>
                    </header>
    
                    <!-- 标题与登录注册 -->
                    <div class="d-flex align-items-center login">
                        <div class="px-0 px-lg-5">
                            <h1 class="font-weight-bold py-3">心情惬意，来杯咖啡吧 <span class="iconfont icon-kafei"></span></h1>
                            <div class="d-none d-sm-block my-3">
                                <a href="#" class="text-success">
                                    <span class="iconfont icon-denglu"></span>
                                    <span>登录</span>
                                </a>
                                <a href="#" class="btn btn-outline-success ml-4 register">注册</a>
                            </div>
                        </div>
                    </div>
    
                    <!-- 点击菜单后要展示的内容 -->
                    <div class="d-flex bg-white flex-column justify-content-between position-absolute menu hide">
                        <header class="navbar d-flex px-0 px-lg-3 py-3 py-lg-4">
                            <a href="#" class="navbar-brand"><img src="images/logo.svg" alt="" width="36"></a>
                            <span class="iconfont icon-guanbi" id="closeBtn"></span>
                        </header>
                        <div class="list">
                            <ul class="list-unstyled mx-sm-5 pl-sm-5">
                                <li><a href="#" class="font-weight-bold text-dark py-2 d-block">门店</a></li>
                                <li><a href="#" class="font-weight-bold text-dark py-2 d-block">星享俱乐部</a></li>
                                <li><a href="#" class="font-weight-bold text-dark py-2 d-block">菜单</a></li>
                                <hr>
                                <li><a href="#" class="font-weight-bold text-dark py-2 d-block">星巴克移动应用</a></li>
                                <li><a href="#" class="font-weight-bold text-dark py-2 d-block">星礼卡</a></li>
                                <li><a href="#" class="font-weight-bold text-dark py-2 d-block">星巴克臻选™</a></li>
                                <li><a href="./啡快.html" class="font-weight-bold text-dark py-2 d-block">啡快™ － 在线点 到店取</a></li>
                                <li><a href="./专星送.html" class="font-weight-bold text-dark py-2 d-block">专星送™</a></li>
                                <li><a href="#" class="font-weight-bold text-dark py-2 d-block">咖啡星讲堂</a></li>
                                <li><a href="./上海烘培工坊.html" class="font-weight-bold text-dark py-2 d-block">上海烘焙工坊</a></li>
                                <li><a href="#" class="font-weight-bold text-dark py-2 d-block">关于星巴克</a></li>
                                <li><a href="#" class="font-weight-bold text-dark py-2 d-block">帮助中心</a></li>
                                <hr>
                            </ul>	
                        </div>
                    </div>
    
                </div>
            </div>
        </div>
        
    </div>
        
    <div class="right">
        <div class="hb">  
            <img src="./images/烘培.JPG" alt="">
        </div>
        <div id="banner">
            <div class="pic">
                <a href="#" style="display:block"><img alt="" src="images/烘培轮播1.jpg" /></a>
                <a href="#"><img alt="" src="images/烘培轮播2.jpg" /></a>
                <a href="#"><img alt="" src="images/烘培轮播3.jpg" /></a>
            </div>
            <div class="btn1">
                <ul>
                    <li class="one">1</li>
                    <li>2</li>
                    <li>3</li>   
                </ul>
            </div>
       </div>
       <div class="bean">
           <h1>生豆站</h1>
           <br>
           <h3> 这里是咖啡豆开启烘焙之旅的第一站。烘焙团队在此割开麻袋，倾倒出生豆并储藏起来。</h3>
       </div>
       <div class="bottom">
        <div class="p1">
            <img alt="" src="images/烘培轮播4.jpg" /></a>
        </div> 
        <div class="p2">
            <img alt="" src="images/烘培轮播5.jpg" /></a>
        </div>   
        <div class="p3">
            <img alt="" src="images/烘培轮播6.jpg" /></a>
        </div>
        <div class="p4">
            <img alt="" src="images/烘培轮播7.jpg" /></a>
        </div>
        <div class="p5">
            <img alt="" src="images/烘培轮播8.jpg" /></a>
        </div>
        
        
       </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"></script>
      <script>
          $('#showBtn').on('click',function(){
              $('.menu').removeClass('hide').addClass('show');
              shadowMenu();
          });
          $('#closeBtn').on('click',function(){
              $('.menu').removeClass('show').addClass('hide');
              shadowMenu();
          });
  </script>
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script type="text/jscript">
       $(function () {
           $("#all li").mouseover(function () {//鼠标进入离开事件 
              $(this).css("background-color", "#ff00ff").siblings().css("background-color", "white"); 
               $(this).css({ "background-color": "red", "font-size": "9px" }).siblings().hide();
           });
           $(window).scroll(function () {//鼠标滚动事件
            var _top = $(window).scrollTop(); //获得鼠标滚动的距离
           });
           //手动播放图片
           $(".btn1 ul li").hover(function () {
               $(this).addClass("one").siblings().removeClass("one");
               index = $(this).index();
               i = index;
               $(".pic a").eq(index).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
           });
           //自动播放图片
           var i = 0;
           var t = setInterval(autoplay, 1000);
           function autoplay() {
               i++;
               if (i > 4) i = 0;
               $(".btn1 ul li").eq(i).addClass("one").siblings().removeClass("one");
               $(".pic a").eq(i).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
           }
           $("#banner").hover(function () {
               clearInterval(t);
           }, function () {
               t = setInterval(autoplay, 1000);
           });
       });
 
     </script>
</body>
</html>
